<template>
  <div class="app-container">
    <div class="content-box">
      <el-row :gutter="20">
        <el-col :span="12" class="order-box" style="padding: 0">
          <el-card class="box-card h350">
            <div slot="header" class="clearfix">
              <span>订单详情</span>
            </div>
            <div class="mytable">
              <table
                class="el-table__body"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <tbody>
                  <tr class="el-table__row">
                    <th style="width: 20%">订单号</th>
                    <td style="width: 30%">{{ info.order_sn }}</td>
                    <th style="width: 20%">下单时间</th>
                    <td style="width: 30%">{{ info.createtime }}</td>
                  </tr>
                  <tr class="el-table__row">
                    <!-- <th>订单总金额</th>
                    <td>￥{{ info.total_price }}</td> -->
                    <th>实际支付</th>
                    <td>￥{{ info.actual_pay }}</td>
                    <th class="">订单状态</th>
                    <td colspan="3">
                      {{ info.status_text }}
                    </td>
                  </tr>
                  <!-- <tr class="el-table__row">
                    <th>运费金额</th>
                    <td>￥{{ info.total_postage }}</td>
                    <th class="">优惠金额</th>
                    <td>￥{{ info.discount_price }}</td>
                  </tr> -->
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" class="order-box">
          <el-card class="box-card h350">
            <div slot="header" class="clearfix">
              <span>支付信息</span>
            </div>
            <div class="mytable">
              <table
                class="el-table__body"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <tbody>
                  <tr class="el-table__row">
                    <th style="width: 20%">支付方式</th>
                    <td style="width: 30%">{{ info.pay_way }}</td>
                    <th style="width: 20%">支付时间</th>
                    <td style="width: 30%">{{ info.pay_time_text }}</td>
                  </tr>
                  <tr class="el-table__row">
                    <th>用户名</th>
                    <td>
                      {{
                        info.buyer && info.buyer.name ? info.buyer.name : "无"
                      }}
                    </td>
                    <th>真实姓名</th>
                    <td>
                      {{
                        info.buyer && info.buyer.real_name
                          ? info.buyer.real_name
                          : "无"
                      }}
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <th>电话号码</th>
                    <td>
                      {{
                        info.buyer && info.buyer.mobile
                          ? info.buyer.mobile
                          : "无"
                      }}
                    </td>
                    <th>身份证号</th>
                    <td>
                      {{
                        info.buyer && info.buyer.id_card_no
                          ? hideIdCard(info.buyer.id_card_no)
                          : "无"
                      }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="order-box">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>商品信息</span>
            </div>
            <el-table
              :data="info.order_goods"
              row-key="goods_sn"
              row-class-name="goods_table"
            >
              <el-table-column width="80" label="商品图片">
                <template slot-scope="goods">
                  <el-image
                    class="good_img"
                    :src="goods.row.goods_image"
                    :preview-src-list="[goods.row.goods_image]"
                  >
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column label="商品名称">
                <template slot-scope="goods">
                  <div>{{ goods.row.goods_title }}</div>
                </template>
              </el-table-column>
              <el-table-column label="商品规格">
                <template slot-scope="goods">
                  <div>{{ goods.row.spec_value }}</div>
                </template>
              </el-table-column>
              <el-table-column label="商品数量">
                <template slot-scope="goods">
                  <div>{{ goods.row.goods_num }}</div>
                </template>
              </el-table-column>
              <el-table-column label="商品单价">
                <template slot-scope="goods">
                  <div>￥{{ goods.row.goods_price }}</div>
                </template>
              </el-table-column>
              <el-table-column label="商品总价">
                <template slot-scope="goods">
                  <div>{{ goods.row.total_price }}</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12" class="order-box">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>收货地址信息</span>
            </div>
            <div class="mytable">
              <table
                class="el-table__body"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <tbody v-if="info.contacts">
                  <tr class="el-table__row">
                    <th style="width: 20%">收货人</th>
                    <td rowspan="1" colspan="1" style="width: 30%">
                      {{ info.contacts }}
                    </td>
                    <th style="width: 20%">联系电话</th>
                    <td rowspan="1" colspan="1">
                      {{ info.mobile }}
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <th>收货地址</th>
                    <td colspan="3">
                      {{ info.address}}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" class="order-box">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>快递信息</span>
            </div>
            <p
              v-if="info.logistics_company != ''"
              style="margin-top: 0; font-size: 14px"
            >
              快递公司：{{ info.logistics_company }}
            </p>
            <p
              v-if="info.logistics_sn != ''"
              style="font-size: 14px"
            >
              运单号：{{ info.logistics_sn }}
            </p>
            <div class="mytable">
              <table
                class="el-table__body"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <tbody v-if="info.logisticsInfo">
                  <tr class="el-table__row">
                    <th style="width: 20%">状态</th>
                    <th style="width: 30%">内容</th>
                    <th style="width: 30%">时间</th>
                  </tr>
                  <tr
                    class="el-table__row"
                    v-for="(item, index) in info.logistics"
                    :key="index"
                  >
                    <td>{{ item.status }}</td>
                    <td>{{ item.context }}</td>
                    <td>{{ item.time }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getOrder } from "@/api/orderlist";
export default {
  name: "orderDateil",
  data() {
    return {
      id: 1,
      info: {},
    };
  },
  created() {
    this.id = this.$route.params && this.$route.params.id;
    this.getData();
  },
  methods: {
    getData() {
      getOrder({ order_id: this.id }).then((response) => {
        this.info = response.data;
      });
    },
    hideIdCard(value) {
      var str1 = value.slice(0, 6);
      var str2 = "";
      var str3 = value.slice(14);
      if (value.length == 15) {
        str2 = "******";
      } else {
        str2 = "********";
      }
      return str1 + str2 + str3;
    },
  },
};
</script>
<style lang="scss" scoped>
table {
  width: 100%;
}
.order-box {
  margin-bottom: 20px;
}
.h350 {
  min-height: 280px;
}
.mytable {
  overflow: auto;
  border: 1px solid #f3f3f3;
  border-right: unset;
  .el-table__body {
    font-size: 12px;
    tr {
      th,
      td {
        padding: 10px;
        border-right: 1px solid #e6e6e6;
      }
      &:nth-child(2n + 1) {
        background: #f3f3f3;
      }
    }
  }
  .row1 {
    background: #f3f3f3;
  }
  .td,
  .th {
    padding: auto 5px;
    font-size: 12px;
    min-height: 40px;
    line-height: 40px;
    vertical-align: middle;
  }
  .td {
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
img {
  width: 100%;
}
</style>
